<template>
    <div>
        <back-head title="归属地" returnFlag="true"></back-head>

        <!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
            </div>
            <el-row>
                <el-table
                    ref="list"
                    border
                    :data="dataList"
                    highlight-current-row
                    style="width: 100%;">
                    <el-table-column
                        prop="address"
                        label="城市">
                    </el-table-column>
                    <el-table-column
                        prop="id"
                        label="属性编号">
                    </el-table-column>
                    <el-table-column
                        label="所属城市状态">
                        <template slot-scope="scope">
                            {{statusObj[scope.row.status] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-warn" @click="changeStatus(1,scope.row.id)" :disabled='scope.row.status == 1'>系统维护</el-button></el-button>
                            <el-button type="text" icon="el-icon-forward" @click="changeStatus(0,scope.row.id)" :disabled='scope.row.status == 0'>恢复正常</el-button></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>  

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>

    </div>
</template>

<script>
export default {
    data() {
        return{
            productId : this.$route.query.productId,
            dataList : [],    //list数据
            current : 1,  //当前页码
            pageSize : Number(localStorage.getItem('pageSize')),
            total : 0,
            statusObj: {
                0 : '正常',
                1 : '系统维护'
            }
        }
    },
    created() {
        this.getData();  //获取列表数据
    },
    methods: {
        getData(){
            this.$axios
                .post("/admin/goodsAddress/query",{
                    goodId: this.productId,
                    pageNo: this.current,
                    pageSize: this.pageSize
                })
                .then(res => {
                    const data = res.data;
                    if(data.success){
                        this.dataList = data.list;
                        if(data.pageInfo){
                            //获取分页信息
                            this.current = data.pageInfo.pageIndex;
                            this.total = data.pageInfo.recordCount;
                        }
                        //获取数据合并后的id集合
                        this.checkedGameId = this.dataList.map(e => e.id);
                    }else{
                        this.$message.error(data.message);
                    } 
                })
        },
        changeStatus(status, id){
            const statusText = status == 0 ? '正常' : '系统维护';
            this.$confirm(`是否将商品城市状态改为${statusText}`, '提示', {
                    type: 'info'
                }).then(()=>{
                    this.$axios
                        .post("/admin/goodsAddress/update",{
                            id: id,
                            status: status
                        })
                        .then(res => {
                            const data = res.data;
                            if(data.success){
                                this.$message.success("商品城市状态更改成功！");
                                this.getData();
                            }else{
                                this.$message.error(data.message);
                            } 
                        })
                }).catch(()=>{
                    
                })
        }
    }
}
</script>


<style scoped>
    
</style>
